import React, { useMemo, useState } from "react";
import styles from "./detail.module.css";
import { Card, Popup, Steps, List, Checkbox, NavBar } from "antd-mobile";
import { Button } from "react-vant";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { stateChange } from "../../store/TickPerson";
import { useDispatch } from "react-redux";

const { Step } = Steps;
function INdex() {
  const navigator = useNavigate();
  const [visible1, setVisible1] = useState(false);
  const handelAdd = () => {
    navigator(`/addproson`);
  };
  const { tickPersonList } = useSelector((state) => state.TickPerson);//获取仓库乘车人数据
  const dispatch = useDispatch();

  const tickstatech = useMemo(() => {
    return tickPersonList.filter((item) => item.state);
  }, [tickPersonList]);//获取选中的乘车人数据
  return (
    <div>
      <NavBar onBack={() => navigator(-1)}>车票详情页</NavBar>
      <div>
        <div className={styles.list_st}>
          <span>北京</span>
          <span>23:53:17</span>
          <span>上海</span>

          <span>
            商务座 : <b>有票</b>
          </span>
          <span>
            一等座 : <b>有票</b>
          </span>
          <span>
            二等座 : <b>有票</b>
          </span>
        </div>
        <Button
          className={styles.detail_jtz}
          size="mini"
          onClick={() => setVisible1(true)}
        >
          经停站
        </Button>
      </div>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        bodyStyle={{
          borderTopLeftRadius: "8px",
          borderTopRightRadius: "8px",
          minHeight: "40vh",
        }}
      >
        <Steps direction="vertical">
          <Step title="北京" status="process" description="停车时间 ：15:00" />
          <Step title="天津" status="wait" description="停车时间 ：11:00" />
          <Step title="保定" status="wait" description="停车时间 ：13:00" />
          <Step title="山西" status="wait" description="停车时间 ：7:00" />
          <Step title="广西" status="wait" description="停车时间 ：6:00" />
          <Step title="四川" status="wait" description="停车时间 ：5:00" />
        </Steps>
      </Popup>
      <Button block onClick={() => handelAdd()}>
        添加乘车人
      </Button>
      <Card title="乘车人">
        <List>
          {tickstatech?.map((item, ind) => (
            <List.Item
              key={ind}
              description={item.code}
              extra={
                <Checkbox
                  checked={item.state}
                  onChange={() => {
                    dispatch(stateChange(item));
                  }}
                />
              }
            >
              {item.name}
            </List.Item>
          ))}
        </List>
      </Card>
      <div className={styles.detail_bu}>
        <Button block color="#000">
          立即预订
        </Button>
      </div>
    </div>
  );
}

export default INdex;
